<template>
  <div style="min-height: 600px;">
    <Row style="padding: 20px 0px;">
      <Col :span="24">
        <createForm :model="form" :rules="rules" :process="process" :doFetchData="getAdminDetail"  @on-create="handleCreate" @on-edit="handleEdit" :name="isEdit ? 'AdminEditCache' : 'AdminCreateCache'">
          <FormItem label="昵称：" prop="name">
            <Input type="text" v-model="form.name" />
          </FormItem>
          <FormItem label="账号：" prop="email">
            <Input type="text" v-model="form.email" />
          </FormItem>
          <FormItem label="角色组：" prop="role_id">
            <role-select v-model="form.role_id"/>
          </FormItem>
          <FormItem label="登录密码：" prop="password" v-if="!isEdit">
            <Input type="password" v-model="form.password" />
          </FormItem>
          <FormItem label="再次输入密码：" prop="repeat_password" v-if="!isEdit">
            <Input type="password" v-model="form.repeat_password" />
          </FormItem>
        </createForm>
      </Col>
    </Row>
  </div>
</template>

<script>
import admin from "@/api/admin"
import {mapState, mapActions} from "vuex"
import createForm from '@/components/common/createForm.vue'
import roleSelect from '@/components/roleSelect.vue'
import util from "@/libs/util";

export default {
  name: 'admin-form',
  components: {
    createForm,
    roleSelect,
  },

  data() {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.form.repeat_password !== '') {
          this.$refs.form.validateField('repeat_password');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      searching: false,
      form: {
        name: '',
        role_id: '',
        email: '',
        password: '',
        type: 'ADMIN',
        repeat_password: '',
      },

      buttonLoading: false,
      process: false,

      rules: {
        name: [
          { required: true, message: '请填写名称', trigger: 'blur' }
        ],
        role_id: [
          { required: true, type: 'number', message: '请选择角色', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请填写登录账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          // { validator: validatePass, trigger: 'blur' }
        ],
        repeat_password: [
          { required: true, message: '请再次填写密码', trigger: 'blur' },
          // { validator: validatePass2, trigger: 'blur' }
        ],
      }

    }
  },

  computed: {
    ...mapState({
      mainLoading: state => state.main_loading,
      detail: state => state.admin.detail
    }),

    isEdit() {
      return this.$route.meta.edit == true
    }

  },

  methods: {
    ...mapActions(['getAdminDetail']),

    // 处理编辑
    handleEdit(postData) {
      this.process = true
      delete postData.password;
      admin.update(postData, this.detail.id).then(ret => {
        this.process = false
        util.success('编辑成功！')
      }).catch(ret => {
        this.process = false
      })
    },

    // 处理创建
    handleCreate(postData) {
      if(postData.password != postData.repeat_password) {
        util.error('两次输入密码不一致！')
        return false;
      }
      this.process = true
      admin.store(postData).then(ret => {
        this.process = false
        util.success('添加成功！')
        this.$router.push({path: '/admin'})
      }).catch(ret => {
        this.process = false
      })
    }

  }
}
</script>
